<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'质保金'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem" v-for="(item,index) in repaymentDetailsList" :key="index">
            <p class="analyItemTit tx-center">项目{{index + 1}}</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">项目名称</span>
                    <span :data-title="item.proname.substring(0,4)">{{item.proname.substring(0,4)}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">项目经理</span>
                    <span>{{item.pm_username}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">实际回款时间</span>
                    <span>{{item.actualTime.substring(0,10)}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">待回</span>
                    <span>{{item.Period}}期款 - <span class="cRed">质</span></span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8" :data-title="item.Received.toFixed(2)  +'/'+ item.Receivable.toFixed(2)">回款额(已/应)</span>
                    <span>{{(item.Received / 10000).toFixed(2)}}W / {{(item.Receivable / 10000).toFixed(2)}}W</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8" >倒计时</span>
                    <span class="cRed" v-if="item.day < 0">{{item.day}}天</span>
                    <span class="cGreen" v-else-if="item.day == '已回'">{{item.day}}</span>
                    <span class="cGreen" v-else-if="item.day >= 0">{{item.day}}天</span>
                </p>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                 <p class="col-md-4">
                    <span class="pr8 cLightGray">未收</span>
                    <span  :data-title="(RepaymentRatioMap.warrantyAllReceivable - RepaymentRatioMap.warrantyAllReceived).toFixed(2) +'元' ">{{((RepaymentRatioMap.warrantyAllReceivable - RepaymentRatioMap.warrantyAllReceived) / 10000).toFixed(2)}}W</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">本月应收</span>
                    <span>{{(RepaymentRatioMap.warrantyReceivable / 10000).toFixed(2)}}W</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">本月已收</span>
                    <span>{{((RepaymentRatioMap.warrantyReceived) / 10000).toFixed(2)}}W</span>
                </p>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { getRepaymentRatio } from '../../Resources/Api'
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            RepaymentRatioMap: {},
            repaymentDetailsList: [],
            Receivable: 0,
            Received: 0
        }
    },
    created () {
        this.getRepaymentRatio()
    },
    computed: {
        ...mapGetters(['userInfo', 'leftInfo'])
    },
    methods: {
        getRepaymentRatio () {
            getRepaymentRatio({
                regionID: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.RepaymentRatioMap = res.data.Body.RepaymentRatioMap
                    this.repaymentDetailsList = res.data.Body.repaymentDetailsList.filter(item => item.type === 4)
                    this.repaymentDetailsList.forEach(item => {
                        this.Receivable += item.Receivable
                        this.Received += item.Received
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>
